<template>
  <div class="avatar">
    <n-avatar :size="48" :src="modelValue" @click="handAvatar" />
    <upd-avatar ref="avatarRef" @success="avatarChange" />
    <input
      style="display: none"
      type="file"
      id="upload"
      accept="image/png, image/jpeg"
      required
      @change="fileChange"
    />
  </div>
</template>
<script setup lang="ts">
import { NAvatar } from 'naive-ui'
import { defineAsyncComponent, ref } from 'vue'
const UpdAvatar = defineAsyncComponent(
  () => import('@/components/yang/com/UpdAvatar.vue')
)

defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['update:modelValue'])

const avatarRef = ref()
const fileChange = (e: any) => {
  const file = e.target.files[0]
  avatarRef.value.open(file)
}

const handAvatar = () => {
  document.getElementById('upload')?.click()
}

const avatarChange = (avatar: string) => {
  emit('update:modelValue', avatar)
}
</script>
<style scoped lang="scss"></style>
